<template>
	<div class="abs-page page-notice">
		<Head navTitle="公告" />
		<div class="page-container activity-container">
			<el-row :gutter="22">
				<el-col :xs="24" :md="12">
					<div class="bs-panel ht-panel bs-notice-panel">
						<div class="infinite-list-wrapper">
							<ul class="actlist noticelist" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
								<li v-for="(item,index) in list" :key="index" @click="actClick(index)" class="act-cell flex-center">
									<div class="flex_bd">
										<div class="cate-title flex-center">
											<img :src="item.icon" >{{item.cate}}
										</div>
										<div class="act-desc ellipsis">{{item.desc}}</div>
										<div class="act-time">2021-09-10 22:00</div>
									</div>
								</li>
							</ul>
							<div class="load-more" v-if="loading"><i class="el-icon-loading"></i> 加载中...</div>
							<div class="load-more" v-if="noMore">没有更多了</div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :md="12" class="el-col-nr-hide">
					<div class="bs-panel ht-panel bs-notice-panel">
						<div class="art-content">
							<div class="art-heading">
								<div class="cate-title flex-center">
									<img src="../../assets/images/nt-icon1.png" >【系统通知】
								</div>
								<div class="item-time">2021-09-10 22:00</div>
							</div>
							<div class="art-body clearfix">
								<p>曼联本赛季后半程的表现可圈可点，球队在联赛和欧联杯中齐头并进，目前联赛稳居积分榜次席的同时，欧联杯也杀入了半决赛，不过由于曼城的发挥太过强势，目前联赛还剩5轮的情况下，曼联和前者的差距较多，联赛争冠希望已经不大，所以近期曼联也将重心放到了欧战中，周中的欧联杯半决赛，曼联在主力尽出的情况下，主场6:2血洗罗马，一只脚已经踏入了最后的决赛，本场联赛面对老对手利物浦，相信红魔依然会高举进攻大旗，而从数据上来看，曼联最近各项赛事已经是主场五连胜的走势，前场的卡瓦尼、格林伍德、拉什福德以及费尔南德斯多点开花。</p>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import Head from '@/components/Head.vue'
	export default {
		components: {
			Head
		},
		data() {
			return {
				list: [{
						cate:'【系统通知】',
						icon:require('../../assets/images/icon_notification01@2x.png'),
						desc: '这是提现通知这是提现通知这是提现通知这是提现通知',
					},{
						cate:'【下注成功】',
						icon:require('../../assets/images/icon_notification02@2x.png'),
						desc: '这是提现通知这是提现通知这是提现通知这是提现通知',
					},{
						cate:'【包赔跟投】',
						icon:require('../../assets/images/icon_notification02@2x.png'),
						desc: '这是提现通知这是提现通知这是提现通知这是提现通知',
					},{
						cate:'【结果通知】',
						icon:require('../../assets/images/icon_notification04@2x.png'),
						desc: '这是提现通知这是提现通知这是提现通知这是提现通知',
					},{
						cate:'【充值通知】',
						icon:require('../../assets/images/icon_notification06@2x.png'),
						desc: '这是提现通知这是提现通知这是提现通知这是提现通知',
					},{
						cate:'【提现通知】',
						icon:require('../../assets/images/icon_notification05@2x.png'),
						desc: '这是提现通知这是提现通知这是提现通知这是提现通知',
					},
				],
				count: 6,
				loading: false,
				windowWidth: document.documentElement.clientWidth
			}
		},
		computed: {
			noMore() {
				return this.count >= 20
			},
			disabled() {
				return this.loading || this.noMore
			}
		},
		mounted() {
			var that = this;
			window.onresize = () => {
				return (() => {
					window.fullWidth = document.documentElement.clientWidth;
					that.windowWidth = window.fullWidth; // 宽
				})()
			};
		},
		watch: {
			
		},
		methods: {
			load() {
				this.loading = true
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						this.list.push({
							cate:'【提现通知】',
							icon:require('../../assets/images/nt-icon1.png'),
							desc: '这是提现通知这是提现通知这是提现通知这是提现通知',
						});
					}
					this.loading = false
				}, 1000)
			},
			actClick(val) {
				let that = this;
				console.log("实时屏幕宽度：", val, that.windowWidth);
				if (that.windowWidth<1000) {
					this.$router.push('/noticeDetail');
				} else{
					alert(val)
				}
			}
		}
	}
</script>
